<template>
  <div ref="list" class="article-list" @scroll="scrollEvent">
    <!-- 上拉加载 1：产生滚动条（样式上要产生滚动区域）
                  2：导入与注册list组件
                  3：用van-list将内容包起来
                  4：配制v-model="loading(默认值为false)"
                    配制finished="默认值是false,加载完成才改成true"
                    配制finished-text="加载完成的文本显示"
                    配制@load="load"  滚动条距离底部小于300时执行，它是自动执行
                    load(){
                      调用接口
                      调用完成：
                          数据要累加
                          将v-model的值改成false
                          修改接口请求参数（修改请求参数为下一次数据请求参数）
                          判断数据是否加载完成，加载 完成将finished=true
                    }   -->

    <!--  路由传值
       传：
          html:  router-link to="/xxx?参数名=值"
          js：this.$router.push('/xxx?参数名=值')
       收：
         this.$route.query.参数名  -->
    <van-pull-refresh v-model="isLoading" @refresh="refresh">
      <van-list
        v-if="showList"
        v-model="loading"
        @load="getData"
        :finished="finished"
        finished-text="没有更多了"
      >
        <div
          @click="toArticle(i.art_id)"
          class="item"
          v-for="i in list"
          :key="i.art_id"
        >
          <div class="title">{{ i.title }}</div>

          <div class="img">
            <img
              v-for="(item, index) in i.cover.images"
              :key="index"
              :style="{ width: (1 / i.cover.images.length) * 100 + '%' }"
              :src="item"
              alt=""
            />
          </div>
          <div class="other">
            <div class="name">{{ i.aut_name }}</div>
            <div class="comment">{{ i.comm_count }}评论</div>
            <!-- 过滤器
                  定义
                     局部过滤器
                     特点：不能用this.只能用于v-bind与{{}}
                       filters:{
                          过滤器名字(str){
                            return 新的值
                          }
                       }
                      全局过滤器（main.js）
                        Vue.filter(过滤器名字,(str)=>{return 值})
                  调用
                     {{ 实参值 | 过滤器名字 }}  -->
            <div class="time">{{ i.pubdate | relvTime }}</div>
            <div class="close">X</div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Articles } from '@/api/articleList'
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      timestamp: Date.now(), // 只是获取第一页，下一页数据需要使用上一页产生的时间戳
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      showList: true,
      scrollTop: 0
    }
  },
  created () {
    // this.getData()
  },
  methods: {
    async getData () {
      const res = await Articles({
        channel_id: this.id,
        timestamp: this.timestamp
      })
      // 上拉加载调用完接口
      // 1：数据累加
      this.list.push(...res.data.results)
      // 2:loading的值改成false
      this.loading = false
      // 3:修改请求参数（调用页码数据）
      this.timestamp = res.data.pre_timestamp
      // 4:判断是否加载完成  pre_timestamp===null没有下一页了
      if (!res.data.pre_timestamp) {
        this.finished = true
      }
      console.log(res)
    },
    refresh () {
      // 刷新要干什么？让该组件的相应变量值回到初始状态，还要让list组件也加到初始状态
      this.timestamp = Date.now()
      this.list = []
      this.loading = false
      this.finished = false
      // 静默刷新
      this.showList = false
      this.$nextTick(() => {
        this.showList = true
        this.isLoading = false
      })
    },
    // 点击跳转
    toArticle (id) {
      this.$router.push('/article?id=' + id)
    },
    // 记录滚动条位置
    scrollEvent (e) {
      this.scrollTop = e.target.scrollTop
      // console.log(e.target.scrollTop)
    }
  },
  activated () {
    // 还原滚动条位置
    this.$refs.list.scrollTop = this.scrollTop
  }
}
</script>
<style lang="less" scoped>
.article-list {
  padding: 0 10px;
  width: 100vw;
  box-sizing: border-box;
  position: fixed;
  top: 90px;
  bottom: 50px;
  overflow-y: auto;
  .item {
    padding: 10px 0;
    .title {
      font-size: 16px;
      font-weight: 500;
      padding-bottom: 10px;
    }
    .img img {
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .other {
      display: flex;
      color: #969799;
      padding-top: 10px;
      .time {
        flex: 1;
      }
      .comment {
        padding: 0 10px;
      }
    }
  }
}
</style>
